<template>
  <div class="login">
    <h2>密码登录</h2>
    <input type="text" placeholder="手机/用户名" v-model="username" />
    <input type="password" placeholder="密码" v-model="pass" />
    <button @click="login">登录</button>
    <p>
      <router-link to="/register">手机号注册</router-link>
      <a href="#">忘记密码</a>
    </p>
  </div>
</template>

<script>
import { user_login } from "../api/index";
export default {
  data() {
    return {
      username: "",
      pass: "",
    };
  },
  methods: {
    login() {
      user_login({ phone: this.username, pass: this.pass }).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
            this.$router.push("/index")
            localStorage.setItem('token',res.data.token)
        } else {
            alert("登录失败，请检查输入框的值或者是您输入的手机号还没有注册");
        }
      });
    },
  },
};
</script>

<style scoped>
.login {
  width: 360px;
  height: 600px;
  background-color: #fff;
  margin: 30px auto;
  padding: 100px 10px;
  /* background-color: gainsboro; */
  /* border: 1px solid; */
}
h2 {
  height: 40px;
  line-height: 40px;
  margin-bottom: 20px;
}
input {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid gainsboro;
}
button {
  margin-top: 50px;
  width: 100%;
  height: 30px;
  border-radius: 20px;
  color: gray;
  background-color: gainsboro;
}
p {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
a {
  color: rgb(7, 170, 234);
}
</style>